import React,{useState,useEffect,useRef} from 'react';
import {Table, Tabs, Button, Space,Modal,message } from 'antd';
import Axios from "../../util/axios"
import AddCodeRule from "./AddCodeRule";

const { TabPane } = Tabs;
const { confirm } = Modal;

function Systemset(props) {
    const [dataSource,setdataSource] =useState([]);
    const columns = [
        {
            title: '行号',
            dataIndex: 'lineNumber',
            key: 'lineNumber',
            render:(lineNumber) =>{
                return <span>{lineNumber}</span>
            }

        },
        {
            title: '编码名称',
            dataIndex: 'codeName',
            key: 'codeName'
        },
        {
            title: '编码前缀',
            dataIndex: 'encodPrefix',
            key: 'encodPrefix'
        },
        {
            title: '中间是否加日期',
            dataIndex: 'isAddDate',
            key: 'isAddDate'
        },
        {
            title: '中间是否加时间',
            dataIndex: 'isAddTime',
            key: 'isAddTime'
        }
        ,
        {
            title: '流水号',
            dataIndex: 'serialNumber',
            key: 'serialNumber'
        }
        ,
        {
            title: '示例',
            dataIndex: 'example',
            key: 'example'
        }
        ,
        {
            title: '备注',
            dataIndex: 'remarks',
            key: 'remarks'
        }
        ,
        {
            title: '操作',
            align:'center',
            render: (item)=>{
                return(
                    <Space>
                        <Button size="small" type="primary"
                                onClick={()=>{editMethod(item)}} >编辑</Button>
                        <Button  size="small" type="danger"
                                 onClick={()=>{confirmMethod(item)}}>删除</Button>
                    </Space>
                )
            }
        }
    ];

    //添加按钮
    const [isAddvisible,setisAddvisible] =useState(false);
    const  [liuShui,setLuiShui] =useState([]);
    const addFrom =useRef(null);
    const addFormOk =() =>{
        // console.log(addFrom)
        addFrom.current.validateFields().then(value => {
            setisAddvisible(false);
            //添加后重置
            addFrom.current.resetFields();
            //post到后端，生成id，再设置DataSource，方便后面删除和更新
            Axios.post("/addSystemSetting",{...value})
                .then(res =>{
                    console.log(res.data);
                    setdataSource([...dataSource,res.data.data])
                    addFunction();
                })
        }).catch(err =>console.log(err))
    }

    //修改
    const [current,setcurrent] =useState(null);
    const editMethod =(item)=>{
        //同步，不然刷新后就没了
        setTimeout(() =>{
            setisupdatevisible(true);
            updateForm.current.setFieldsValue(item)
        },0)
        setcurrent(item)
    }
    const [isupdatevisible,setisupdatevisible] =useState(false);
    const updateForm =useRef(null);
    const updateFormOk =() =>{
        updateForm.current.validateFields().then(value => {
            console.log(value);
            setisupdatevisible(false);
            setdataSource(dataSource.map((item) =>{
                if (item.lineNumber===current.lineNumber){
                    return {
                        ...item,
                        ...value
                    }
                }
                return item

            }))
            //        把更改的向后台发送过去，否则刷新页面之后没了
            Axios.post("/updateSystemSetting",{value})
        })
    }


    //删除
    const confirmMethod =(item) =>{
        confirm({
            title: '你想要删除吗?',
            content: '确定要删除这条数据吗?',
            onOk() {
                deleteMethod(item);
                message.success('已成功删除');
            },
            onCancel() {
                message.error('删除失败');
            },
        });
    }
    const deleteMethod =(item) =>{
        Axios.get("/deleteSystemSetting", {params:{lineNumber:item.lineNumber
            }}).then((res) =>{
            setdataSource([...dataSource,res.data.data])
            addFunction();

        }).catch(err =>console.log(err))
    }

    //封装重新渲染页面后端的数据
    const addFunction =()=>{
        Axios.get("/systemsettings").then((res) =>{
            setdataSource(res.data.data)
        });
    }
    useEffect(() =>{
        addFunction();
        Axios.get("/liushui").then((res) =>{
            setLuiShui(res.data.data)
        })
    },[]);

    return (
        <div>
            <Tabs defaultActiveKey="1" type="card">
                <TabPane tab="编码规则设置" key="1">
                    <div>
                        <Button type="primary" onClick={() =>{
                            setisAddvisible(true)
                        }} >增加编码规则</Button>
                        <Table
                            rowSelection={{
                                type: 'checkbox'
                            }}
                            dataSource={dataSource}
                            columns={columns}
                            pagination={{pageSize:3}}
                            scroll={{y:240}}
                            rowKey="lineNumber"
                        />
                    </div>

                </TabPane>
            </Tabs>
            <Modal
                visible={isAddvisible}
                title="增加编码规则"
                okText="确定"
                cancelText="取消"
                onCancel={() =>{
                    setisAddvisible(false)
                }}
                onOk={()=>addFormOk()}
            >
                <AddCodeRule liuShui={liuShui} ref={addFrom} ></AddCodeRule>
            </Modal>
            <Modal
                visible={isupdatevisible}
                title="修改编码规则"
                okText="确定"
                cancelText="取消"
                onCancel={() =>{
                    setisupdatevisible(false)
                }}
                onOk={()=>updateFormOk()}
            >
                <AddCodeRule liuShui={liuShui} ref={updateForm} ></AddCodeRule>
            </Modal>
        </div>
    );
}

export default Systemset;